<template>
  <div class="approve-item">
    <Card>
      <div class="card-title">
        <p>{{ node.nodename || node.nodeName}}</p>
        <div v-if="isEdit">
          <Icon @click="handleNodeEditClickOnEdit" class="edit-button" type="md-create" />
          <Icon @click="handleNodeDelClickOnEdit" class="del-button" type="md-trash" />
        </div>
        <div v-else>
          <Icon @click="handleNodeEditClickOnNew" class="edit-button" type="md-create" />
          <Icon @click="handleNodeDelClickOnNew" class="del-button" type="md-trash" />
        </div>
      </div>
      <div class="default-approver">
        <p>
          <b>默认审批人</b>
        </p>
        <div>
          审批人单位：{{ node.remake }}
          <br />
          审批人名称：{{ node.tenantid }}
        </div>
      </div>
    </Card>
    <div v-if="isEdit">
      <Icon @click="handleAddProcessClickOnEdit" class="add-button" type="ios-add" />
    </div>
    <div v-else>
      <Icon @click="handleAddProcessClickOnNew" class="add-button" type="ios-add" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    node: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleNodeEditClickOnEdit () {
      this.$emit('on-edit-click');
    },
    handleNodeDelClickOnEdit () {
      this.$emit('on-del-click');
    },
    handleAddProcessClickOnEdit () {
      this.$emit('on-add-click');
    },
    handleNodeEditClickOnNew () {
      this.$emit('on-edit-click-new');
    },
    handleNodeDelClickOnNew () {
      this.$emit('on-del-click-new');
    },
    handleAddProcessClickOnNew () {
      this.$emit('on-add-click-new');
    }
  }
};
</script>

<style lang="less" scoped>
.approve-item {
  width: 260px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
  .ivu-card {
    width: 220px;
  }
  .card-title {
    display: flex;
    border-bottom: 1px solid rgb(182, 179, 179);
    justify-content: space-between;
    margin-bottom: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }
  .default-approver {
    font-size: 13px;
    line-height: 20px;
  }
  .edit-button {
    font-size: 20px;
    margin-right: 5px;
    color: #5a6fce;
    cursor: pointer;
  }
  .del-button {
    font-size: 20px;
    color: #ed4014;
    cursor: pointer;
  }
  .add-button {
    font-size: 30px;
    background-color: #5a6fce;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
</style>
